<template>
  <div class="upload">
    <head-component title="上传凭证" />
    <div class="upload_main">
      <!-- 填写列表部分 -->
      <div class="upload_list_box">
        <div class="upload_list" @click="select.show = true">
          <div class="f32">产品名称</div>
          <div class="upload_list_input chanpin_name">
            <input class="f32" type="text" disabled v-model="name" placeholder="请输入产品名称">
            <img src="@/common/icon/down.png" alt="">
          </div>
        </div>
        <div class="upload_list">
          <div class="f32">客户电话</div>
          <input v-model="kehuTel" class="f32 upload_list_input" maxlength="11" type="text" placeholder="请输入客户电话">
        </div>
        <div class="upload_list">
          <div class="f32">代理电话</div>
          <input v-model="dailiTel" class="f32 upload_list_input" maxlength="11" type="text" placeholder="请输入代理电话">
        </div>
        <div class="upload_list" @click="timeShow = true">
          <div class="f32">申请日期</div>
          <input v-model="shenqingTime" disabled class="f32 upload_list_input" type="text" placeholder="请输入申请日期">
        </div>
      </div>
      <!-- 上传图片部分 -->
      <div class="upload_img_main">
        <div class="upload_img_box">
          <div class="upload_img">
            <div class="f32 col_33 upload_img_title">下款页面截图</div>
            <label class="user_img_lable" for="UserImgInput" @click="imgIndex = 0">
              <img class="user_img" @click="uploadImg(1)" :src="url1" alt="">
            </label>
          </div>
          <div class="upload_img">
            <div class="f32 col_33 upload_img_title">短信到账截图</div>
            <label class="user_img_lable" for="UserImgInput" @click="imgIndex = 1">
              <img  class="user_img" @click="uploadImg(2)" :src="url2" alt="">
            </label>
          </div>
          <div class="upload_img">
            <div class="f32 col_33 upload_img_title">信贷产品截图</div>
            <label class="user_img_lable" for="UserImgInput" @click="imgIndex = 2">
              <img  class="user_img" @click="uploadImg(3)" :src="url3" alt="">
            </label>
          </div>
        </div>
      </div>
      <div class="global_btn upload_btn" @click="pingzhengBtn">提交</div>
    </div>

    <!-- 下拉框 -->
    <form-select
      v-model="select.show"
      :options="select.options"
      :selectFunc="selectFunc" />
    <!-- 时间选择 -->
    <div v-if="timeShow" class="choose_time_bg">
      <div class="choose_time">
        <van-datetime-picker
          @cancel="cancelPicker"
          @confirm="confirmPicker"
          type="date"
        />
      </div>
    </div>
  </div>
</template>
<script>
import headComponent from '@/components/layout/head';
import formSelect from '@/components/layout/select';
import addImg from '@/common/icon/home/upload.jpg'
export default {
  name: '',
  components: {
    headComponent,
    formSelect
  },
  data() {
    return {
      name: '', // 产品名称
      pid: '', // 下拉框产品id
      select: { // select选择选项, 及是否显示
        options: [],
        show: false
      },
      kehuTel: '', // 客户电话
      dailiTel: '', // 代理电话
      shenqingTime: '', // 申请日期
      timeShow: false, // 控制时间选择器是否显示
      url1:addImg,
      g_pic1:'',
      url2:addImg,
      g_pic2:'',
      url3:addImg,
      g_pic3:'',
    }
  },
  mounted() {
    this.getNews();
  },
  methods: {
    // 任务凭证下拉商品
    getNews(){
      let $this = this;
      var t = this.$toast.loading({message:'正在加载数据',mask:true, duration:9999})
      let uid = localStorage.getItem('uid');
      let token = localStorage.getItem('token');
      let data = { u_id:uid, token:token }
      $this.$axios.post('index.php?m=index&c=upload_task', data).then(res=>{
        t.clear();
        $this.select.options = res.data.goods.map((item, index) => {
          const obj = {
            id: item.p_id,
            name: item.p_name
          }
          return obj;
        })
      })
    },
    // select选择方法
    selectFunc (item, index) {
      this.select.show = false;
      this.name = item;
      this.pid = this.select.options[index].id;
    },
    cancelPicker() { // 时间选择器取消按钮点击事件
      this.timeShow = false;
      this.datePicker = "";
    },
    confirmPicker(value) { // 时间选择器确定按钮
      var date = value;
      var m = date.getMonth() + 1;
      var d = date.getDate();
      if (m >= 1 && m <= 9) {
          m = "0" + m;
      }
      if (d >= 0 && d <= 9) {
          d = "0" + d;
      }
      var timer = date.getFullYear() + "-" + m + "-" + d;
      this.timeShow = false;
      this.shenqingTime = timer;
    },

    uploadImg(num){
      var _  = this;
      var input = document.createElement('input');
      input.type = 'file';
      var _  = this;
      input.onchange = function() {
        var file = this.files[0];
        if(num==1){
          _.url1 = URL.createObjectURL(file);
          _.g_pic1 = file;
        }else if(num == 2){
          _.url2 = URL.createObjectURL(file);
          _.g_pic2 = file;
        }else{
          _.url3 = URL.createObjectURL(file);
          _.g_pic3 = file;
        }
        input = null;
      };
      input.click();
    },


    // 上传凭证
    pingzhengBtn(){
      let $this = this;
      if($this.name === ''){ // 产品名称
        $this.$toast({
          message: '请选择产品名称',
          duration: 800
        })
        return;
      } else if($this.kehuTel.length!=11){
        $this.$toast({ // 客户电话
          message: '请输入正确的客户电话',
          duration: 800
        })
        return;
      } else if($this.dailiTel.length!=11){
        $this.$toast({ // 代理电话
          message: '请输入正确的代理电话',
          duration: 800
        })
        return;
      } else if ($this.shenqingTime === ''){ // 申请日期
        $this.$toast({
          message: '请选择您的申请日期',
          duration: 800
        })
        return;
      }
      let uid = localStorage.getItem('uid');
      let token = localStorage.getItem('token');
      let data = { u_id:uid, token:token, p_id:$this.pid, t_client_phone:$this.kehuTel, t_agent_phone:$this.dailiTel, t_addtime:$this.shenqingTime, t_exhausting_img:$this.g_pic1, t_msg_img:$this.g_pic2, t_approve_img:$this.g_pic3 }

      var flag = true;
      var formdata = new FormData();
      for(let attr in data) {
        formdata.append(attr,data[attr]);
      }
      if(flag){
        $this.$axios({method:'post', url:'http://www.yykjxxzx.com/index.php?m=index&c=upload_do', data: formdata, headers: {'Content-Type': 'multipart/form-data'}})
          .then(res=> {
            if(res.data.code == 1) {
              $this.$toast({
                message: res.data.msg,
                duration: 800,
                onClose:() =>{
                  $this.$router.back();
                }
              });
            }
        })
      }


    }
  },
}
</script>
<style lang="less">
  .upload_main{
    margin-top: 1.2rem;
    border-top: 1Px solid rgba(0, 0, 0, 0.05);
    padding: 0 0.4rem;
    .upload_list_box{
      .upload_list{
        height: 1.6rem;
        display: flex;
        display: -webkit-flex;
        align-items: center;
        -webkit-align-items: center;
        justify-content: flex-start;
        -webkit-justify-content: flex-start;
        border-bottom: 1Px solid rgba(0, 0, 0, 0.05);
        .upload_list_input{ margin-left: 0.4rem; }
        .chanpin_name{
          flex: 1;
          -webkit-flex: 1;
          display: flex;
          display: -webkit-flex;
          align-items: center;
          -webkit-align-items: center;
          justify-content: space-between;
          -webkit-justify-content: space-between;
          img{ width: 0.4rem; }
        }
      }
    }
    // 上传图片部分
    .upload_img_main{
      margin-top: 0.4rem;
      .upload_img_box{
        display: flex;
        display: -webkit-flex;
        justify-content: flex-start;
        -webkit-justify-content: flex-start;
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        .upload_img{
          width: 50%;
          position: relative;
          .upload_img_title{ height: 1.2rem; line-height: 1.2rem; }
          .user_img_lable{
            input{
              position: absolute;
              top: 1.2rem;
              left: 0;
              width: 2.4rem;
              height: 2.4rem;
              opacity: 0;
            }
            img{ width: 2.4rem; height: 2.4rem; }
          }
        }
      }
    }
    .upload_btn{ margin-top: 0.4rem; }
  }
  .choose_time_bg{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.5);
    .choose_time{
      width: 100%;
      position: absolute;
      bottom: 0;
    }
  }
</style>
